{% extends 'myhome/base.html' %}

    {% block title %}
    <title>BookShop-购物车</title>
    {% endblock %}

    {% block con %}
    <!-- breadcrumbs-area-start -->
    <div class="breadcrumbs-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="breadcrumbs-menu">
                        <ul>
                            <li><a href="{% url 'myhome_index' %}">首页</a></li>
                            <li><a href="{% url 'myhome_cartindex' %}" class="active">购物车</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- breadcrumbs-area-end -->
    <!-- entry-header-area-start -->
    <div class="entry-header-area">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="entry-header-title">
                        <h2>购物车</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- entry-header-area-end -->
    <!-- cart-main-area-start -->
    <div class="cart-main-area mb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <form action="#">
                        <div class="table-content table-responsive">
                            <table>
                                <thead>
                                    <tr>
                                        <th class="product-thumbnail">
                                            <input type="checkbox" class="checkall">
                                        </th>
                                        <th class="product-thumbnail">图片</th>
                                        <th class="product-name">书名</th>
                                        <th class="product-price">价格</th>
                                        <th class="product-quantity">数量</th>
                                        <th class="product-subtotal">小计</th>
                                        <th class="product-remove">操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                {% for i in userobj.cart_set.all %}
                                    <tr>
                                        <td>
                                            <input type="checkbox" style="width:14px;" cartid="{{ i.id }}">
                                        </td>
                                        <td class="product-thumbnail">
                                            <a href="#"><img src="{{ i.bid.bookimgs_set.first.img_url }}" alt="man" /></a>
                                        </td>
                                        <td class="product-name"><a href="#">{{ i.bid.title }}</a></td>
                                        <td class="product-subtotal">￥<span>{{ i.bid.price }}</span></td>
                                        <td class="product-quantity">
                                            <input type="number" name="num" min="1" value="{{ i.num }}">
                                            <input type="hidden" name="cartid" value="{{ i.id }}">
                                        </td>
                                        {% load calculate %}
                                        <td class="product-price">￥<span class="amount">{% mul i.bid.price i.num %}</span></td>
                                        <td class="product-remove">
                                            <a href="javascript:void(0);"><i class="fa fa-times"></i></a>
                                        </td>
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    </form>
                </div>
            </div>
            <div class="row">
                <div class="col-lg-8 col-md-8 col-sm-6 col-xs-12">
                    <div class="buttons-cart mb-30">
                        <ul>
                            <li><a href="{% url 'myhome_index' %}">继续购物</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12">
                    <div class="cart_totals">
                        <h3>金额明细</h3>
                        <br>
                        <table>
                            <tbody>
                                <tr class="order-total">
                                    <th>商品总价：</th>
                                    <td>￥<span name="totals">0.00</span></td>
                                </tr>
                                <tr class="order-total">
                                    <th>运费：</th>
                                    <td>￥<span name="freight">10.00</span></td>
                                </tr>
                                <tr class="order-total">
                                    <th>合计：</th>
                                    <td><strong>￥<span name="Totals">0.00</span></strong>
                                    </td>
                                </tr>
                                <tr>
                                    <th>&nbsp;</th>
                                    <td>
                                        <div class="wc-proceed-to-checkout">
                                            <a id="addorder" href="javascript:void(0)">结算</a>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                        <br>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- cart-main-area-end -->
    {% endblock %}

    {% block myjs %}
    <script>
        // 结算
        $('#addorder').click(function(){
            // 获取被选中的id列表，根据列表长度判断是否选中商品
            var res = TotalPrice()
            if(res.length){
                // 结算时有被选中的商品，跳转到订单页面，并用get请求传递被选中的id列表
                location.href="{% url 'myhome_orderconfirm' %}?ids="+res
            }else{
                alert('请先选择要购买的商品')
            }
        })

        // 全选
        $('input[type=checkbox]').click(function(){
            // 当点击全选时，为所有选框设置与全选相同的状态,true为选中
            if($(this).attr('class') == 'checkall'){
                $('input[type=checkbox]').prop('checked',this.checked)
            }
            TotalPrice()
        })

        // 计算总价
        function TotalPrice(){
            var total = 0
            var cartids = []
            // 循环所有checkbox，获取所有被选中元素的小计价格
            $('input[type=checkbox]').each(function(){
                // checked为true则参与运算
                if($(this).prop('checked')){
                    var subtotal = Number($(this).parents('tr').find('.product-price span').text())
                    total += subtotal
                    // 获取当前选中元素的id
                    cartid = $(this).attr('cartid')
                    if(cartid){
                        cartids.push(cartid)
                    }
                }
            })
            // 设置价格
            $('span[name=totals]').text(FloatTwo(total))
            T = Number($('span[name=totals]').text()) + Number($('span[name=freight]').text())
            $('span[name=Totals]').text(FloatTwo(T))

            // 返回被选中的id列表
            return cartids
        }

        // 编辑购物车商品数量
        $('input[name=num]').blur(function(){
            // 获取当前元素的值
            var data = {}
            data['n'] = Number($(this).val())
            data['cartid'] = $(this).next().val()
            var price = Number($(this).parents('tr').find('.product-subtotal span').text())
            var $this = $(this)
            // 发送ajax请求到后台，更新购物车商品数量
            $.get('{% url "myhome_cartedit" %}',data,function(sdata){
                if(sdata['code']){
                    alert(sdata['msg'])
                }else{
                    // 修改小计价格
                    var x = FloatTwo(data['n'] * price)
                    $this.parents('tr').find('.product-price span').text(x)
                }
            },'json')
        })

        // 删除购物车商品
        $('.product-remove a').click(function(){
            // 弹出确认框
            var res = confirm('确认从购物车删除该商品吗？')
            var $this = $(this)
            // 确认则返回True
            if(res){
                // 获取要删除的购物车id
                var cartid = $(this).parents('tr').find('input[name=cartid]').val()
                // 发送ajax请求到后台，删除购物车对象
                $.get('{% url "myhome_cartdelete" %}',{'cartid':cartid},function(data){
                    // 判断是否删除成功
                    if(data['code']){
                        alert(data['msg'])
                    }else{
                        // 删除成功，在购物车页面删除该tr
                        $this.parents('tr').remove()
                    }
                },'json')
            }
        })

        // 保留小数点后两位
        function FloatTwo(value){
            var value = Math.round(parseFloat(value)*100)/100;
            var xsd = value.toString().split('.');
            if(xsd.length == 1){
                value = value.toString() + '.00';
                return value;
            }
            if(xsd.length > 1){
                if(xsd[1].length < 2){
                    value = value.toString() + '0';
                }
                return value;
            }
        }

    </script>
    {% endblock %}























